<template>
  <div>
    <el-button type="success" @click="insertPersonVisible = true"
      >新增某人</el-button
    >

    <el-dialog :visible.sync="insertPersonVisible" title="新增某人页面">
      <el-form>
        <el-form-item label="xingming">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="nianling">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="xingbie">
          <el-input></el-input>
        </el-form-item>
        <el-button>重置</el-button>
        <el-button>提交</el-button>
      </el-form>
      <template #footer>
        <el-button>放弃修改</el-button>
        <el-button>提交</el-button>
      </template>
    </el-dialog>

    <el-button>编辑某人</el-button>
    <el-button type="success" @click="insertGoodsVisible = true"
      >新增某物</el-button
    >
    <el-drawer
      :visible.sync="insertGoodsVisible"
      size="80%"
      direction="ttb"
      :with-header="false"
      append-to-body
    >
      <el-form>
        <el-form-item label="xingming">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="nianling">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="xingbie">
          <el-input></el-input>
        </el-form-item>
        <el-button>重置</el-button>
        <el-button>提交</el-button>
        <el-button @click="supportVisible = true">寻求支援</el-button>
      </el-form>
    </el-drawer>
    <el-drawer :visible.sync="supportVisible">
      <el-form-item label="xingming">
        <el-input></el-input>
      </el-form-item>

      <el-input></el-input>
    </el-drawer>
    <el-button>编辑某物</el-button>
    <el-button type="warning" @click="methodToFlat"
      >测试树形结构转扁平化结构</el-button
    >
    <el-button type="success" @click="methodToTree"
      >测试扁平化结构转树形结构</el-button
    >
  </div>
</template>

<script>
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
export default {
  name: "TestDrawer",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      insertPersonVisible: false,
      insertGoodsVisible: false,
      supportVisible: false,

      list1: [
        { id: 1, name: "张三" },
        { id: 2, parentId: 1, name: "张其一" },
        { id: 5, parentId: 1, name: "张其二" },
        { id: 3, name: "李四" },
        { id: 4, parentId: 3, name: "李其一" },
      ],
      list2: [
        {
          id: 1,
          name: "张三",
          children: [
            { id: 2, parentId: 1, name: "张其一", children: [] },
            { id: 5, parentId: 1, name: "张其二", children: [] },
          ],
        },
        {
          id: 3,
          name: "李四",
          children: [{ id: 4, parentId: 3, name: "李其一", children: [] }],
        },
      ],
      list3: [
        { id: 1, name: "张三" },
        { id: 2, parentId: 1, name: "张其一" },
        { id: 5, parentId: 1, name: "张其二" },
        { id: 3, name: "李四" },
        { id: 4, parentId: 3, name: "李其一" },
      ],
    };
  },
  methods: {
    sampleM() {},
    methodToFlat() {
      let out = this.$util.toTreeArray(this.list2);
      console.log(out);
      out.forEach((x) => {
        delete x.children;
      });
      this.$message.warning(JSON.stringify(out));
    },
    methodToTree() {
      let out = this.$util.toArrayTree(this.list1);
      this.$message.warning(JSON.stringify(out));
    },
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
